<template>
  <div class="item">
    <div>
      <div class="item-img">
        <img
          :alt="item.name"
          :src="item.sku_info[itemIndex].ali_image"
          style="opacity: 1"
        />
      </div>
      <h6>{{ item.name }}</h6>
      <h3>{{ item.name_title }}</h3>
      <div class="params-colors">
        <ul class="colors-list">
          <li
            v-for="(sku, index) in item.sku_info"
            @click="tableIndex(index)"
            :key="index"
            :class="{ active: index == itemIndex }"
          >
            <a href="javascript:;" :title="sku.spec_json.show_name"
              ><img
                :src="
                  'http://img01.smartisanos.cn/' +
                  sku.spec_json.image +
                  '20X20.jpg'
                "
            /></a>
          </li>
        </ul>
      </div>
      <div class="item-btns clearfix">
        <span class="item-gray-btn"
          ><router-link :to="`/item?itemId=${item.sku_info[itemIndex].sku_id}`"
            ><a href="javascript:;" target="_blank">查看详情</a>
          </router-link> </span
        ><span
          class="item-blue-btn"
          @click="addCarPanelHandle(item.sku_info[itemIndex])"
          >加入购物车
        </span>
      </div>
      <div class="item-price clearfix">
        <i>¥</i><span>{{ item.price }}</span>
      </div>
      <div class="discount-icon">false</div>
      <div class="item-cover">
        <router-link :to="`/item?itemId=${item.sku_info[itemIndex].sku_id}`">
          <a href="javascript:;" target="_blank"></a
        ></router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemIndex: 0,
    };
  },
  props: {
    item: {
      type: Object,
    },
  },
  methods: {
    tableIndex(index) {
      this.itemIndex = index;
    },
    addCarPanelHandle(data) {
      let itemData = { info: data, count: 1 };
      this.$store.commit("addCarPanelData", itemData);
    },
  },
};
</script>
<style >
</style>